<template>
  <div class="popover" :style="defaultStyle">
    <div class="header" :style="headerStyle">
      <div style="width: 10px; position: absolute; background-color: skyblue" v-if="topIcon === 'colorBlock'">&nbsp;</div>
      <div style="width: 12px;height: 12px;margin-left: 5px; position: absolute; background-color: skyblue; border-radius: 100%" v-if="topIcon === 'roundFull'">&nbsp;&nbsp;&nbsp;&nbsp;</div>
      <slot name="header-left"></slot>
      <slot name="header-right"></slot>
    </div>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue'
  import { topIconTypes } from "./card";

  const props = defineProps({
    shadow: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: true
    },
    topIcon: {
      type: String,
      values: topIconTypes,
      default: 'colorBlock'
    },
    topDivider: {
      type: Boolean,
      default: true
    }
  })

  const defaultStyle = computed(() => {
    let styleObj = ''
    if (props.shadow) {
      styleObj += 'box-shadow: #ccc 3px 3px 3px 3px ;'
    }
    if (props.border) {
      styleObj += 'border:1px solid #ccc;'
    }
    return styleObj
  })

  const headerStyle = computed(() => {
    if (props.topDivider) {
      return 'border-bottom:1px solid #ccc;'
    } else return 'border-bottom:0px solid #ccc;'
  })
</script>

<style scoped>
  .popover {
    background: #fff;
  }
  .popover .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
</style>
